<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>样式绑定</title>
  </head>
  <style type="text/css">
    .classA {
      color: red;
    }

    .classB {
      background-color: blue;
    }

    .classC {
      font-size: 20px;
    }

    .classD {
      box-shadow: 0 0 1px blue;
    }

    .classE {
      border: 1px solid #ccc
    }
  </style>


  <body>
    <div id="app">
      <!-- 
        绑定class的方法：
       -->
      <!-- 
        样式绑定第一种写法：字符串 
        适用于：类名不确定，要动态获取
      -->
      <h1 class="classA" :class="border">{{msg}}</h1>
      <!-- 
        样式绑定第二种写法：对象 
        适用于：类名确定，但不确定用不用
      -->
      <h1 class="classA" :class="{classB:hasB,classC:hasC}">{{msg}}</h1>
      <!-- 
        样式绑定第三种写法：数组
        适用于：同时绑定多个样式
       -->
      <h1 class="classA" :class="['classA','classB','classC','classD','classE']">数组：{{msg}}</h1>

      <!-- 三元运算符 -->
      <h1 class="classA" :class="isShow ? 'classC' :'classB'">三元运算符：{{msg}}</h1>

      <!-- 绑定样式-->

      <h1 :style="{fontSize:size+'px'}">绑定style:{{msg}}</h1>

    </div>
  </body>
  <script src="../js/vue.js"></script>
  <script type="text/javascript">
    new Vue({
      el: "#app",
      data() {
        return {
          msg: "你好，样式绑定class",
          border: 'classE',
          isShow: false,
          hasB: true,
          hasC: true,
          size: 30
        }
      }
    })
  </script>

</html>